<!-- 近一年销售金额趋势分析 -->
<template>
  <ModuleTitle title="近一年销售金额趋势分析">
    <div ref="chartRef" class="flex-1 w-full h-full"></div>
  </ModuleTitle>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import ModuleTitle from './ModuleTitle.vue'


import { useAutoRefresh } from '@/hooks/useAutoRefresh'

useAutoRefresh(fetchData)

const chartRef = ref(null)
let chartInstance = null
let intervalId = null
let currentIndex = 0

// 生成模拟数据
const generateMockData = () => {
  const months = Array.from({ length: 12 }, (_, i) => `${i + 1}月`)
  const visitorData = Array.from({ length: 12 }, () => Math.floor(Math.random() * 5000) + 1000)
  // 新增一组模拟数据用于堆叠面积图
  const visitorData2 = Array.from({ length: 12 }, () => Math.floor(Math.random() * 3000) + 500)
  return { months, visitorData, visitorData2 }
}

const { months, visitorData, visitorData2 } = generateMockData()

const initChart = () => {
  if (chartRef.value) {
    chartInstance = echarts.init(chartRef.value)
    const option = {
      color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      grid: {
        top: '20%',
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
        show: false
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        splitLine: {
          show: false,
          lineStyle: {
            width: 1,
            color: 'rgba(170,243,215,0.2)'
          }
        },
        axisLabel: {
          color: '#ABB0BD'
        },
        data: months
      },
      yAxis: {
        type: 'value',
        name: '单位: 元',
        nameTextStyle: {
          color: '#ffffff'
        },
        splitLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: 'rgba(170,243,215,0.2)'
          }
        },
        axisLabel: {
          color: '#ABB0BD',
          formatter: '{value}'
        },
        // 鼠标悬浮时不高亮显示轴标签
        axisPointer: {
          label: {
            show: false
          }
        }
      },
      series: [
        {
          name: '销售金额',
          type: 'line',
          stack: 'Total',
          smooth: true,
          lineStyle: {
            width: 0
          },
          showSymbol: false,
          areaStyle: {
            opacity: 0.8,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: 'rgb(128, 255, 165)'
              },
              {
                offset: 1,
                color: 'rgb(1, 191, 236)'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: visitorData,
        }
      ]
    }
    chartInstance.setOption(option)
  }
}
// 自动循环显示 tooltip
const autoShowTooltip = () => {
  if (chartInstance) {
    // 隐藏之前的 tooltip
    chartInstance.dispatchAction({
      type: 'hideTip'
    })
    // 显示当前索引的 tooltip
    chartInstance.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: currentIndex
    })
    // 更新索引
    currentIndex = (currentIndex + 1) % months.length
  }
}

// 组件自己的数据获取方法
function fetchData() {
  console.log('执行组件数据刷新')
  // 这里调用API获取数据
}

onMounted(() => {
  initChart()
  intervalId = setInterval(autoShowTooltip, 3700)
})

// 组件卸载时清除定时器
onUnmounted(() => {
  if (intervalId) {
    clearInterval(intervalId)
  }
  if (chartInstance) {
    chartInstance.dispose()
  }
})

// 监听窗口大小变化，重新渲染图表
window.addEventListener('resize', () => {
  if (chartInstance) {
    chartInstance.resize()
  }
})

watch(
  () => [months, visitorData, visitorData2],
  () => {
    if (chartInstance) {
      initChart()
    }
  }
)
</script>